<template>
  <div class="building">
    <el-container class="home-container">
      <el-header>
        <router-link style="text-decoration: none;" to="/home">
          <div class="logo_tile">
            <h2>后台</h2>
          </div>
        </router-link>
        <div class="logo_tile">
          <p>欢迎:<{{user.showName}}></p>
          <el-button @click="logout" type="info">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '65px' : '200px'">
          <div class="toggleBar" @click="isCollapse=!isCollapse">|||</div>
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            router
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            active-text-color="#409EFF">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span style="margin-left: 10px">房源管理</span>
              </template>
              <el-menu-item v-if="user.status==0" index="/landlord">房源列表</el-menu-item>
              <el-menu-item v-if="user.status==1"   index="/intermediary">审核列表</el-menu-item>
            </el-submenu>
            <el-submenu index="2"  v-if="user.status==1">
              <template slot="title">
                <i class="el-icon-user-solid"></i>
                <span style="margin-left: 10px">用户管理</span>
              </template>
              <el-menu-item index="/UserList">用户列表</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧的 主体区域 -->
        <el-main building>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Home",
    data(){
      return{
        cusName:"",
        isCollapse:false,
        user:{showName:null},
      }
    },
    methods:{
      logout:function(){
        sessionStorage.removeItem("user");
        this.$router.push('/login')
      },
    },
    mounted() {
      //获取当前登录用户
      this.user = JSON.parse(sessionStorage.getItem("user")); //=JSON.parse()字符串转json对象 ，JSON。stringify（）对象转字符串
    }
  }
</script>


<style lang="less" scoped>
  .building {
    width: 100%;
    height: 100%;
    position: fixed;
    background-size: 100% 100%;
    background-color: #ffffff;
  }

  .home-container {
    height: 100%;
    background:#fff;
  }

  .el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    user-select: none;

    .logo_tile {
      display: flex;
      align-items: center;
      color: white;

      h2 {
        font-weight: 200;
        margin-left: 15px;
      }
    }

    .el-button {
      margin-right: 10px;
    }
  }

  .el-aside {
    background-color: #333744;
    user-select: none;
  }

  .el-main {
    background-color: #eaedf1;
  }

  .iconfont {
    margin-right: 8px;
  }

  .toggleBar {
    color: #fff;
    font-size: 12px;
    line-height: 24px;
    background-color: #4a5064;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
    user-select: none;
  }

  .el_submenu_large {
    width: 200px;
  }

  .el_submenu_small {
    width: 65px;
  }

</style>

